<template>
  <!--跟进记录管理-编辑催记信息-->
  <section class="component modify-role">
    <el-form :model="editModel" :rules="rules" ref="form" label-width="90px" class="tableInput">
      <el-row>
        <el-col :span="12">
          <el-form-item label="跟进对象：" prop="relationship">
            <el-select clearable placeholder="请选择" v-model="editModel.relationship">
              <el-option :key="index" :label="name" :value="code" v-for="{ index, name, code } in $dict.getDictData('Relationship')"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="姓名：" prop="targetName">
            <el-input v-model.trim="editModel.targetName" :maxlength="20"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="电话号码：" prop="targetPhone">
            <el-input :disabled="true" v-model.trim="editModel.targetPhone" :maxlength="11"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客观码：" prop="objectiveId">
            <el-select v-model="editModel.objectiveId" @change="objectChange">
              <el-option v-for="{ index, name, id } in objectiveCode" :key="index" :label="name" :value="id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="修饰码:" prop="modifierId">
            <el-select v-model="editModel.modifierId">
              <el-option v-for="{ index, name, id } in modifierCode" :key="index" :label="name" :value="id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="下次跟进时间：" prop="checkTime">
            <el-date-picker :editable="false" placeholder="请选择日期" v-model="editModel.checkTime" value-format="timestamp" format="yyyy 年 MM 月 dd 日" :picker-options="pickerOptions"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item label="催记描述：" prop="followContent">
          <el-input
            type="textarea"
            v-model="editModel.followContent"  
            :rows="5"  
            style="width:97%" 
            maxlength="500" 
            show-word-limit
          ></el-input>
        </el-form-item>
      </el-row>

    </el-form>
    <div class="operate-buttons">
      <el-button @click="close">取消</el-button>
      <el-button @click="submit">确定</el-button>
    </div>
  </section>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { Dependencies } from "~/core/decorator";
import { State, Getter, Action, namespace } from "vuex-class";
import { CaseOperatorPageService } from "~/services/domain-service/case-operator-page.service";
import { PageService } from "~/utils/page.service";
import { SortService } from "~/utils/sort.service";
import { Emit, Prop, Watch } from "vue-property-decorator";
import { UserService } from "~/services/management-service/user.service";
const CollectionExecutionModule = namespace("collection-execution");

@Component({
  components: {}
})
export default class ModifyRole extends Vue {
  @Getter
  private isSupperAdmin: boolean;
  @State
  private companyList: any;
  @State
  private userData: any;
  @Dependencies(UserService)
  private userService: UserService;
  @Dependencies(PageService)
  private pageService: PageService;
  @Dependencies(SortService)
  private sortService: SortService;
  @Dependencies(CaseOperatorPageService)
  private caseOperatorPageService: CaseOperatorPageService;
  @CollectionExecutionModule.State private caseId;
  @CollectionExecutionModule.State private objectiveCode;

  @Prop({ type: Object })
  private roleData: any;

  private editModel: any = {
    relationship: "",
    targetName: "",
    targetPhone: "",
    objectiveId: "",
    modifierId: "",
    operatorCode: "",
    followContent: "",
    checkTime: "",
  };
  private modifierCode: any = [];
  private rules: any = {
    relationship: [{ required: true, message: "请选择催收对象" }],
    targetName: [{ required: true, message: "请输入姓名" }],
    // targetPhone: [
    //   {
    //     required: true,
    //     validator: this.$validator.regex.phoneNumber,
    //     message: "请输入电话号码"
    //   }
    // ],
    objectiveId: [{ required: true, message: "请选择客观码" }],
    followContent: [{ required: true, message: "请输入催记描述" }]
  };
  private deptNameArr: any = []

  private pickerOptions = {
    disabledDate (time) {
      return time.getTime() < Date.now() - 86400000;
    },
  }

  @Emit("refreshList") public refreshList () { }
  @Emit("close") public close () { }

  private mounted () {
    this.initEditModel()
  }

  @Watch('roleData')
  private roleDataChange (data) {
    console.log('roleData', data);
    this.initEditModel()
  }

  private initEditModel () {
    this.editModel = { ...this.roleData }

    console.log('editModel', this.editModel);

  }

  private reset () {
    const form: any = this.$refs["form"];
    form.resetFields();
    this.editModel = this.roleData
  }

  private submit () {
    const form: any = this.$refs["form"];
    form.validate(result => {
      if (!result) return;

      const { relationship, targetName, targetPhone, followContent, checkTime, modifierId, objectiveId } = this.editModel
      const param = {
        caseId: this.caseId,
        id: this.roleData.id,
        relationship,
        targetName,
        targetPhone,
        followContent,
        checkTime,
        modifierId,
        objectiveId
      }
      this.caseOperatorPageService.updateCaseFollowupRecord(param).subscribe(
        data => {
          this.$message.success("编辑成功")
          this.$emit('refreshData')
          this.close()
        },
        err => { }
      )
    });
  }

  private objectChange (val) {
    this.userService
      .findRelationModifierCodeById({ id: val })
      .subscribe(data => {
        // console.log('修饰码数据', data);
        this.modifierCode = data;
      });
    //客观码选择后清空修饰码历史值
    this.$nextTick(() => {
      this.editModel = { ...this.editModel, modifierId: '' }
    });
  }

}
</script>

<style lang="less" scoped>
</style>
